<template>
  <div>
      <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="五级铭文">
          <ul class="five">
            <li v-for="item of five"
                :key="item.ming_id"
                @click="mingShow(item)"
                :style="{'background-color':item.ming_type}"
            >
              {{item.ming_name}}
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="四级铭文">
          <ul class="five">
            <li v-for="item of four"
                :key="item.ming_id"
                @click="mingShow(item)"
                :style="{'background-color':item.ming_type}"
            >
              {{item.ming_name}}
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="三级铭文">
          <ul class="five">
            <li v-for="item of three"
                :key="item.ming_id"
                @click="mingShow(item)"
                :style="{'background-color':item.ming_type}"
            >
              {{item.ming_name}}
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="二级铭文">
          <ul class="five">
            <li v-for="item of two"
                :key="item.ming_id"
                @click="mingShow(item)"
                :style="{'background-color':item.ming_type}"
            >
              {{item.ming_name}}
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="一级铭文">
          <ul class="five">
            <li v-for="item of one"
                :key="item.ming_id"
                @click="mingShow(item)"
                :style="{'background-color':item.ming_type}"
            >
              {{item.ming_name}}
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
      <div class="equipBox" v-if="noshow">
        <div class="equipInfo">
          <h1>{{ming_info.ming_name}}</h1>
          <img :src="'http://game.gtimg.cn/images/yxzj/img201606/mingwen/'+ming_info.ming_id+'.png'">
          <p class="fontc" v-html="ming_info.ming_des"></p>
          <el-button type="success" @click="mingShow">了 解</el-button>
        </div>
      </div>
  </div>
</template>

<script>

  export default {
    name: 'MingWen',
    data() {
      return {
        noshow: false,
        tabPosition: 'left',
        five: [],
        four: [],
        three: [],
        two: [],
        one: [],
        ming_info: []
      }
    },
    created () {
      this.getMingList()
    },
    methods: {
      getMingList () {
        this.$http('../../../static/json/ming.json').then(this.getMingListSucc)
      },
      mingShow (item) {
        this.ming_info = item
        this.noshow = !this.noshow
      },
      getMingListSucc (res) {
        const data = res.data
        for (var i= 0; i< data.length ;i++) {
          switch(Number(data[i].ming_grade)) {
            case 5: this.five.push(data[i]); break;
            case 4: this.four.push(data[i]); break;
            case 3: this.three.push(data[i]); break;
            case 2: this.two.push(data[i]); break;
            case 1: this.one.push(data[i]); break;
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-tabs {
    margin-top: 10px;
  }
  >>>.el-tabs__content {
   overflow: auto;
  }
  .five li {
    width:15%;
    background-color: #dd6161;
    padding: 3px;
    float:left;
    margin-bottom: 5px;
    margin-left: 1%;
    text-align: center;
    line-height: 20px;
    box-shadow: 1px 2px 3px #7e8c8d;
    color:white;
  }
  .equipBox {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    overflow: hidden;
    z-index:4 ;
    position: fixed;
    top:0;
    left: 0;
  }
  .equipInfo {
    width:70%;
    position: fixed;
    z-index: 4;
    background-color: white;
    top:50%;
    left: 50%;
    margin-top: -80px;
    margin-left: -38%;
    text-align: center;
    box-shadow: 2px 2px 4px #cccccc;
    padding: 10px;
  }
  .equipInfo h1 {
    margin: 5px 0;
    font-weight: bold;
    font-size: 20px;
  }
  .equipInfo p {
    margin-bottom: 5px;
  }
  .fontc {
    text-shadow: 1px 1px 2px #ffe87c;
  }
</style>
